<template>

    <el-card shadow="never">
        <template #header>
            <h3>评论列表(<span>{{ total }}</span>)</h3>
        </template>
        <div style="text-align: right;">
            <el-input placeholder="请输入你的评论" type="textarea" :rows="4" v-model="comment"></el-input>
            <el-button type="primary" style="margin-top: 10px;" @click="oncomment">点评</el-button>
        </div>
        <div class="comments-container">
            <div v-if="loading" style="text-align: center; margin-bottom: 20px;">
                <el-button loading>加载中...</el-button>
            </div>
            <div v-else-if="commentList.length > 0">
                <div v-for="item in commentList" :key="item.id" class="comment-item">
                    <div class="avatar-username">
                        <el-avatar :src="`http://localhost/storage/${item.user.avatar}`"
                            class="comment-avatar"></el-avatar>
                        <strong class="comment-username">{{ item.user.username }}</strong>
                    </div>
                    <div class="comment-content">
                        <p class="comment-text">{{ item.content }}</p>
                        <span class="comment-time">
                            <el-icon style="margin-right: 10px;">
                                <Timer />
                            </el-icon>{{ item.create_time }}
                        </span>
                    </div>
                    <!-- 添加删除按钮 -->
                    <div class="delete-button" v-if="user_id == item.user_id">
                        <el-tooltip content="删除">
                            <el-button type="danger" size="small" icon="Delete" circle
                                @click="deleteComment(item.id)"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div style="display: flex; justify-content: center; margin-bottom: 20px;">
                    <el-button @click="loadMore">加载更多</el-button>
                </div>
            </div>
            <div v-else style="text-align: center; margin-bottom: 20px;">
                <p>没有找到评论</p>
            </div>
        </div>
    </el-card>
</template>
<script setup>
import { defineProps, ref } from 'vue';
import { useCookies } from '@vueuse/integrations/useCookies';
import { postcomment, getcomment, deletecomment } from '~/api/food';
import { ElNotification } from 'element-plus';

const cookies = useCookies();
const user_id = ref(cookies.get('use_id'));
const comment = ref('');
const total = ref('0');
const commentList = ref([]);
const page = ref(1); // 当前页码
const perPage = ref(5); // 每页显示的评论数量
const loading = ref(false); // 加载状态
const props = defineProps({
    ids: {
        type: String, // 或者根据实际情况调整为其他类型，如 Number
        required: true
    },
    target_type: {
        type: String, // 或者根据实际情况调整为其他类型，如 Number
        required: true
    }
});
const fetchComments = () => {
    loading.value = true;
    getcomment(props.ids, props.target_type, page.value, perPage.value).then(res => {
        if (Array.isArray(res.commentList)) {
            if (page.value === 1) {
                commentList.value = res.commentList;
            } else {
                commentList.value = [...commentList.value, ...res.commentList];
            }
        } else {
            commentList.value = [];
        }
        total.value = res.total || 0;
        loading.value = false;
    }).catch(error => {
        loading.value = false;
    });
};
fetchComments();
// 加载更多评论
const loadMore = () => {
    if (commentList.value.length >= total.value) {
        ElNotification({
            message: '没有更多评论了',
            type: 'info',
            duration: 3000
        });
        return;
    }
    page.value++;
    fetchComments();
};

const oncomment = () => {
    postcomment(props.ids, props.target_type, comment.value, user_id.value).then(res => {
        if (res.status = "success") {
            ElNotification({
                message: res.message,
                type: 'success',
                duration: 3000
            });
            // 清空评论输入框
            comment.value = '';
            // 刷新评论列表
            page.value = 1;
            fetchComments();
        }
    })
};
// 删除评论
const deleteComment = (id) => {
    deletecomment(id).then(res => {
        if (res.status === "success") {
            ElNotification({
                message: res.message,
                type: 'success',
                duration: 3000
            });
            // 更新评论列表
            fetchComments();
        } else {
            ElNotification({
                message: res.message,
                type: 'error',
                duration: 3000
            });
        }
    }).catch(() => {
        ElNotification({
            message: '删除失败，请重试',
            type: 'error',
            duration: 3000
        });
    });
};
</script>
<style scoped>
.comments-container {
    padding: 20px;
}

.comment-item {
    position: relative;
    /* 添加相对定位 */
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

.comment-item:last-child {
    border-bottom: none;
}

.avatar-username {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-avatar {
    margin-right: 10px;
}

.comment-username {
    font-size: 16px;
    color: #333;
}

.comment-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.comment-text {
    font-size: 14px;
    color: #666;
    margin: 10px 80px;
}

.comment-time {
    font-size: 12px;
    color: #999;
    align-self: flex-end;
}

/* 删除按钮样式 */
.delete-button {
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>